<template>
  <div>
    <el-table :data="tableData" height="500" style="width: 100%;margin-bottom: 20px;" row-key="id" border
      :expand-row-keys="['1','2','16','17','18']" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="index" width="60" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="menuText" label="功能名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="menuIsmodify" label="是否启用" width="180" align="center">
      </el-table-column>
      <el-table-column prop="menuType" label="功能类型" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.menuType === '菜单' ? 'primary' : 'success'" disable-transitions>{{scope.row.menuType}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="menuCreatetime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="menuNote" label="备注" width="200" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button style="color:#67C23A;" @click="addHandle(scope.row)" type="text" size="small"
             v-if="scope.row.menuType === '菜单'" icon="el-icon-circle-plus-outline">新增</el-button>
          <el-button type="text" size="small" @click="editHandle(scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button style="color:red;" @click="delHandle(scope.row)" type="text" size="small" icon="el-icon-delete">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <EditFloat :isExit="isExit" :currentEdit="currentEdit" @event="eventHandle" :key="timer"></EditFloat>
    <AddFloat :isExit1="isExit1" @event1="eventHandle1" :key="timer1"></AddFloat>
  </div>
</template>

<script>
  import axios from 'axios'
  import EditFloat from '@/components/EditFloat'
  import AddFloat from '@/components/AddFloat'
  export default {
    data() {
      return {
        defaultData: [],
        tableData: [],
        isExit: false,
        isExit1: false,
        currentEdit: {},
        currentAdd: {},
        timer: '1',
        timer1: '2'
      }
    },
    components: {
      EditFloat,
      AddFloat
    },
    mounted() {
      axios.get('/data/data.json').then((res) => {
        this.defaultData = res.data.menuTree
        this.tableData = this.formatData(this.defaultData)
      })
    },
    methods: {
      formatData(data) {
        let resultArr = []
        for (let i = 0; i < data.length; i++) {
          if (data[i].menuParentid == '') {
            resultArr.push(data[i])
          }
        }

        for (let i = 0; i < resultArr.length; i++) {
          let newArr = []
          for (let j = 0; j < data.length; j++) {
            if (data[j].menuParentid == resultArr[i].menuId) {
              newArr.push(data[j])
            }
          }
          resultArr[i].children = newArr
        }

        for (let i = 0; i < resultArr.length; i++) {
          for (let k = 0; k < resultArr[i].children.length; k++) {
            let newArr1 = []
            for (let j = 0; j < data.length; j++) {
              if (data[j].menuParentid == resultArr[i].children[k].menuId) {
                newArr1.push(data[j])
              }
            }
            resultArr[i].children[k].children = newArr1
          }
        }
        return resultArr
      },
      delHandle(row) {
        this.$confirm('此操作将永久删除此项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < this.defaultData.length; i++) {
            if (this.defaultData[i].id == row.id) {
              this.defaultData.splice(i, 1)
            }
          }
          this.tableData = this.formatData(this.defaultData)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editHandle(row) {
        this.isExit = true
        this.timer = new Date().getTime()
        for (let i = 0; i < this.defaultData.length; i++) {
          if (this.defaultData[i].id == row.id) {
            this.currentEdit = this.defaultData[i]
          }
        }
      },
      eventHandle($event) {
        for (let i = 0; i < this.defaultData.length; i++) {
          if (this.defaultData[i].id == $event.id) {
            this.defaultData[i] = $event
          }
        }
        this.tableData = this.formatData(this.defaultData)
      },
      addHandle(row) {
        this.isExit1 = true
        this.timer1 = new Date().getTime()+'1'
        for (let i = 0; i < this.defaultData.length; i++) {
          if (this.defaultData[i].id == row.id) {
            this.currentAdd = this.defaultData[i]
          }
        }
      },
      eventHandle1($event) {
        this.defaultData.push($event)
        $event.id = this.defaultData.length
        $event.menuParentid = this.currentAdd.menuId
        this.tableData = this.formatData(this.defaultData)
      }
    }
  }
</script>
<style lang="css">
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
</style>

<style lang="css" scoped>
  /deep/ .el-table thead th {
    height: 30px;
    font-size: 14px;
    color: #47494e;
    font-weight: 500;
    background: #f8f8f8 !important;
  }

  /deep/ .el-table__body td,
  .el-table__body th {
    height: 35px;
    color: #757575;
    font-size: 14px;
  }

  /deep/ .el-table__body tr:hover>td {
    background: #eaf2fe;
  }

  /deep/ .el-table--group,
  .el-table--border {
    border-top: 1px solid #d5dbeb;
    border-left: 1px solid #d5dbeb;
  }

  /deep/ .el-table th.is-leaf,
  .el-table td {
    border-bottom: 1px solid #d5dbeb;
    border-right: 1px solid #d5dbeb;
  }

  /deep/ .el-table tr td {
    border-bottom: 1px solid #d5dbeb;
    border-right: 1px solid #d5dbeb;
  }

  /deep/.el-table--group::after,
  .el-table--border::after,
  .el-table::before {
    content: '';
    position: absolute;
    background-color: #d5dbeb;
    z-index: 1;
  }
</style>